<template>
	<z-paging ref="paging" :refresher-end-bounce-enabled="false" :refresher-complete-duration="300" :refresher-complete-delay="500"
	v-model="chaseList"
	@query="queryList"
	:auto="true" 
	:default-page-size="100"
	loading-more-no-more-text="已经到底线了">
	    <view class="chase_content">
	    	<chase-history :dataList="historyList"></chase-history>
	    	<chase-list :dataList="chaseList" @clickToItem="clickToItemJumpVideo"></chase-list>
	    </view>
	</z-paging>
</template>

<script>
	import {mapState} from 'vuex';
	import chaseHistory from '../../../pages/tabBar/chase/chase-history.vue'
	import chaseList from '../../../pages/tabBar/chase/chase-list.vue'
	import interfaces from '@/utils/interfaces.js'
	import config from '@/utils/config.js'
	import tools from '@/utils/tools.js'
	
	export default {
		components: {
			chaseHistory,
			chaseList
		},
		data() {
			return{
				historyList:[],
				chaseList:[]
			}
		},
		computed: {
			...mapState({
				openid: state => state.user.openid,
				statusBarHeight: state => state.layout.statusBarHeight,
				windowWidth: state => state.layout.windowWidth,
				windowHeight: state => state.layout.windowHeight,
				platform: state => state.layout.platform
			})
		},
		onShow() {
			this.loadHistoryData()
			this.reloadChaseListData()
		},
		onLoad() {
			let self = this;
			uni.$on(config.notification_login_success, function() {				
				self.$refs.paging.reload()
			})
			uni.$on(config.notification_chaseList_add, function(dataList) {
				// console.log("add:", dataList)
				self.chaseList = dataList
			})
			uni.$on(config.notification_chaseList_delete, function(dataList) {
				// console.log("delete:", dataList)
				self.chaseList = dataList
			})
		},
		onUnload() {
			uni.$off(config.notification_login_success)
			uni.$off(config.notification_chaseList_add)
			uni.$off(config.notification_chaseList_delete)
		},
		methods: {
			loadHistoryData() {
				let diyhistorList = tools.get_history();
				// 使观看历史每部剧只显示一集
				let arr = [];
				diyhistorList = diyhistorList.filter(item=> item.name != '' )
				diyhistorList.forEach(item=>{
					console.log(72,item)
					if(!arr.some(i=>i.playlet_id == item.playlet_id)){
						arr.push(item)
					}
				})
				this.historyList = arr;
				console.log(69,this.historyList);
			},
			reloadChaseListData() {
				this.chaseList.forEach((item, index)=> {
					for(var i=0; i<this.historyList.length; i++) {
						let h_item = this.historyList[i]
						if(item.playlet_id == h_item?.video_info?.playlet_id) {
							if(item.playlet_number != h_item.video_info.playlet_number){
								this.$set(item, "playlet_number", h_item.video_info.playlet_number)
								this.$set(item, "playlet_number_name", h_item.video_info.playlet_number_name)
							}
							break;
						}
					}
				})
			},
			queryList(pageNum, pageSize) {
				// console.log("pageNum:", pageNum)
				let self = this;
				if (!this.openid) {
					self.$refs.paging.complete([])
					return
				}
				
				let cacheChaseList = tools.chaseListGetForCache()
				var chaseIds = []
				cacheChaseList.forEach((item, index)=> {
					chaseIds.push(item.playlet_id)
				})
				
				let chaseIdsString = JSON.stringify(chaseIds)
				// console.log("chaseIdsString:", chaseIdsString)
				self.request({
					url: interfaces.user_chase_list,
					data:{"playlet_ids":chaseIdsString, "page": pageNum},
					method:"POST",
					success: (res)=>{
						// console.log("追剧列表",res)
						if (res.code == config.SUCCESS) {
							self.chaseList = []
							res.content.forEach((item, index)=> {
								for(var i=0; i<self.historyList.length; i++) {
									let h_item = self.historyList[i]
									if(item.playlet_id == h_item?.video_info?.playlet_id) {
										self.$set(item, "playlet_number", h_item?.video_info?.playlet_number)
										self.$set(item, "playlet_number_name", h_item?.video_info?.playlet_number_name)
										break;
									}
								}
								self.chaseList.push(item)
							})
							
							self.$refs.paging.complete(res.content)
							tools.chaseListUpdate(self.chaseList)
						
						} else {
							if(self.chaseList.length == 0){
								self.$refs.paging.complete(false)
							}
						}
					},
					fail:(e) => {
						if(self.chaseList.length == 0){
							self.$refs.paging.complete(false)
						}
					}
				});
			},
			clickToItemJumpVideo(res, index) {
				let data = {playlet_id:res.playlet_id,
				            name:res.playlet_name, 
							playlet_number: res.playlet_number,
					        last_episode_number:res.last_episode_number}
				tools.jump_video_page_by_info(data)
				tools.chaseListSort(this.chaseList, res, index)
			}
		}
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
	}
</style>

<style lang="scss">
	.chase_content{
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		padding: 0rpx 30rpx;
	}
</style>